<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css: CSS table</title>
    <style>
        html {
            font-family: sans-serif;
        }

        body{
            margin: 100px auto;
        }

        form {
            display: table;
            margin: 0 auto;
        }

        form div {
            display: table-row;
        }

        form label,
        form input {
            display: table-cell;
            margin-bottom: 10px;
        }

        form label {
            width: 200px;
            padding-right: 5%;
            text-align: right;
        }

        form input {
            width: 300px;
        }

        form p {
            display: table-caption;
            caption-side: bottom;
            width: 500px;
            color: #999;
            font-style: italic;
        }

    </style>
    <script>
        window.onload=function(){
            // alert('onload');
            document.getElementById('btnLogin').onclick=function(event){
                var XHR = new XMLHttpRequest();
                 // 我们定义了数据成功发送时会发生的事。

                XHR.addEventListener("load", function(event) {
                    // alert(event.target.responseText);
                    if(event.target.responseText==='ok'){
                        window.location.href = "http://127.0.0.1:8080/list";
                    }
                });

                var urlEncodedData = "";
                var urlEncodedDataPairs = [];
                var name = document.getElementById('fname').value;
                var pwd = document.getElementById('fpwd').value;
                urlEncodedDataPairs.push(encodeURIComponent('name') + '=' + encodeURIComponent(name));
                urlEncodedDataPairs.push(encodeURIComponent('pwd') + '=' + encodeURIComponent(pwd));

                // 将配对合并为单个字符串，并将所有%编码的空格替换为
                // “+”字符；匹配浏览器表单提交的行为。
                urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');


                // 建立我们的请求
                XHR.open('POST', 'http://127.0.0.1:8080/verify');

                // 为表单数据POST请求添加所需的HTTP头
                XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

                // 最后，发送我们的数据。
                XHR.send(urlEncodedData);
            }
        }
    
    </script>
</head>

<body>
        <form>
            <p>First of all, input your name and password.</p>
            <div>
                <label for="fname">User name:</label>
                <input type="text" id="fname">
            </div>
            <div>
                <label for="lname">Password:</label>
                <input type="password" id="fpwd">
            </div>
            <div>
                <label for="age">&nbsp;&nbsp;:</label>
                <input type="button" id="btnLogin" value="Login">
            </div>
        </form>
</body>

</html>